<template>
	<div class="goodsDetail flexv">
		<!-- 头部 -->
		<pubHead title="商品详情"></pubHead>

		<!-- 返回首页 -->
		<img class="back_home" @click="toHome" src="@/assets/c_returnhome.png" alt="">

		<!-- 轮播图 -->
		<div class="swipe_box" v-if="goodsInfo.images">
			<van-swipe class="swpier" :loop="true" :autoplay="3000" :show-indicators="false" @change="getIndex">
				<van-swipe-item class="swiper_item" v-for="item in goodsInfo.images" :key="item">
					<img :src="item" alt="">
				</van-swipe-item>
			</van-swipe>
			<div class="swipe_index white tc">{{sindex}}/{{goodsInfo.images.length}}</div>
		</div>

		<!-- 商品信息 -->
		<div class="goods_infos flexv">
			<div class="flex top">
				<p class="title twoline flex1">{{goodsInfo.goods_name}}</p>
				<img src="@/assets/c_share.png" @click="showShare" class="share_btn">
			</div>

			<div class="jus-b ali-b prices">
				<div class="ali-b">
					<span>￥{{goodsInfo.goods_price}}</span>
					<div v-if="goodsInfo.first_distribution_price" style="margin-left: 0.2rem;font-size: 0.24rem; color: #EE1C1A;">
						分享赚￥{{goodsInfo.first_distribution_price}}
					</div>
				</div>
				<span class="sales">已售: {{goodsInfo.sales_actual}}</span>
			</div>
		</div>

		<!-- 参数 -->
		<div class="others jus-b mt2" @click="showParams">
			<div class="flex">
				<span>产品说明</span>
				<!-- <span class="text">生产日期 品牌...</span> -->
			</div>
			<img src="@/assets/c_rightarrow.png" class="to_ico" alt="">
		</div>


		<!-- 商品评价 -->
		<div class="evaluates flexv mt2" v-if="comment_count > 0">
			<div class="evaluate_head jus-b">
				<div class="left">精选点评（{{comment_count}}条）</div>

				<div class="right ali-c" @click="toEvaluate">
					<span>查看全部</span>
				</div>
			</div>

			<!-- 评价 -->
			<div class="evaluate flexv" v-for="(item1,index1) in comment" :key="index1">
				<div class="top ali-c">
					<img :src="item1.user_head" class="user_img" alt="">
					<div class="rights flexv">
						<p class="user_name">{{item1.user_name}}</p>
						<div class="ali-b">
							<p class="spec">{{getDate('yyyy-mm-dd',item1.add_time)}}</p>
							<div class="star_box flex">
								<img src="@/assets/icon_up.png" v-for="item in item1.star_num" :key="item" alt="">
							</div>
						</div>
					</div>
				</div>
				<!-- 评价内容 -->
				<div class="evaluate_text mt2">{{item1.content}}</div>
				<!-- 评价图片 -->
				<div class="evaluate_imgs mt2 flex-wrap">
					<img :src="item2" @click="getImg(item1.images,index2)" class="img" alt="" v-for="(item2,index2) in item1.images"
					 :key="index2">
				</div>
			</div>
		</div>
		<!-- 商品详情 -->
		<div class="articles flexv">
			<div class="heads tc">商品详情</div>

			<div class="article"></div>
			<div class="article" v-html="goodsInfo.content"></div>
		</div>

		<!-- 底部栏 -->
		<div class="footer_box">
			<div class="foot_items flex">
				<div class="flex1 flexv item" @click="toHome">
					<img src="@/assets/c_home.png" alt="">
					<p class="tc">首页</p>
				</div>
				<div class="flex1 flexv item" @click="soucang">
					<img src="@/assets/c_collection_n.png" v-if="is_collect == 0" alt="">
					<img src="@/assets/c_collection_s.png" v-else alt="">
					<p class="tc" v-if="is_collect == false">收藏</p>
					<p class="tc" v-else>已收藏</p>
				</div>
				<div class="flex1 flexv item" @click="toCart">
					<img src="@/assets/c_shoppingcart.png" alt="">
					<p class="tc">购物车</p>
					<i class="point white tc" v-if="cartNumber > 0">{{cartNumber}}</i>
				</div>
				<div class="right_btn flex">
					<div class="add_cart white flex1 tc" @click="buyBtn(1)">加入购物车</div>
					<div class="buy_now white flex1 tc" @click="buyBtn(2)">立即购买</div>
				</div>
			</div>
		</div>

		<!-- 分享弹窗 -->
		<van-popup class="share_popup flex" position="bottom" v-model="share">
			<div class="share_box jus-a ali-c">
				<div class="share_item flexv" @click="showFina">
					<img src="@/assets/wechat.png" alt="">
					<p class="tc">微信好友</p>
				</div>
				<div class="share_item flexv" @click="showPost">
					<img src="@/assets/photo.png" alt="">
					<p class="tc">生成海报</p>
				</div>
			</div>
		</van-popup>
		<!-- 参数弹窗 -->
		<van-popup v-model="showParam" :close-on-click-overlay="false" position="bottom" class="c_popup flex">
			<div class="c_box flexv">
				<div class="top tc">
					产品说明
					<img src="@/assets/c_close_icon.png" @click="close" class="cancel" alt="">
				</div>

				<div class="param_lists flex1 flexv" v-if="param && param.length > 0">
					<div class="parama flex" v-for="item in param" :key="item.title">
						<p class="oneline">{{item.title}}</p>
						<p class="notes flex1 oneline">{{item.value}}</p>
					</div>
				</div>

				<div class="empty_attr tc" v-else>
					暂无说明
				</div>


				<div class="close_btn flex">
					<div class="btn tc white" @click="close">确定</div>
				</div>
			</div>
		</van-popup>
		<!-- 规格弹窗 -->
		<van-popup v-model="showSpec" :close-on-click-overlay="false" position="bottom" class="c_popup flex">
			<div class="c_box flexv">
				<!-- 商品信息 -->
				<div class="goods_info flex" v-if="goodsInfo.images">
					<img :src="goodsImg" class="goods_img" alt="">

					<div class="infos flex1 flexv jus-b">
						<p class="title oneline">{{goodsName}}</p>
						<p class="price">¥{{goodsPrice}}</p>
						<p class="stock">库存: {{stock_num}}</p>
					</div>

					<img src="@/assets/c_close_icon.png" @click="close" class="cancel" alt="">
				</div>

				<!-- 规格 -->
				<div style="max-height: 6rem;overflow-y: scroll;">
					<div class="speces flexv" v-for="(item,index) in spec_list" :key="index">
						<div class="spec_title">{{item.spec_name}}</div>

						<div class="sepc_lists flex-wrap">
							<div class="spec" :class="{'on': speclist[index].id==spec.id}" v-for="(spec,ind) in item.sub" :key="ind" @click="chooseThis(spec.id,index)"
							 :data-id="spec.id">{{spec.spec_value}}</div>
						</div>
					</div>
				</div>

				<!-- 数量 -->
				<div class="buy_nums jus-b ali-c">
					<span>购买数量:</span>

					<div class="nums_box flex">
						<div class="cut tc" @click="cutNum">-</div>
						<div class="num tc flex1">{{buyNum}}</div>
						<div class="add tc" @click="addNum">+</div>
					</div>
				</div>

				<!-- 购买按钮 -->
				<div class="buy_btn white tc" @click="toBuy">确定</div>


			</div>
		</van-popup>

		<!-- 最终分享弹窗 -->
		<van-popup v-model="final" class="flex finally_share_box">
			<div class="finally_share flex1 flexv">
				<div class="flex img_box">
					<img src="@/assets/wecheat-share.png" alt="" class="fill">
				</div>
				<p class="click white tc" @click="cancel">我知道了</p>
			</div>
		</van-popup>

		<!--分享海报-->
		<van-popup v-model="shareBox" class="shareBox" id="shareBox">
			<!--        <van-popup v-model="shareBox" class="shareBox" id="shareBox" @click-overlay="closeShareBox"> -->
			<img :src="shareSRC" alt="">
		</van-popup>
		<section class="canvas_share flexv" id="canvas-share" ref="canvasShare" v-if="!shareSRC">
			<div class="share_banner flexv">
				<img :src="shareBannerSRC" alt="" class="fill">
				<p>{{goodsInfo.goods_name}}</p>
			</div>

			<div class="share_code jus-b">

				<div class="share_left flexv jus-a flex1">
					<div class="share_left_top ali-c">
						<img id="a" :src="avatar" class="share_user">
						<p class="name flex1">{{nickname}}</p>
					</div>

					<div class="share_left_bottom ali-c">
						<span class="ico white tc">抢购价</span>
						<span class="price white tc">￥{{goodsInfo.goods_price}}</span>
					</div>
					<div class="logo-area flex ali-b">
						<div class="logo-img">
							<img src="@/assets/logo2.png" />
						</div>
						<span class="logo-name">马帮GO</span>
					</div>
				</div>

				<div class="share_right flexv">
					<img :src="codeSRC" alt="" id="b" class="code">

					<p class="note tc white">·长按立即购买·</p>
				</div>

			</div>
		</section>


	</div>
</template>

<script>
	import Vue from 'vue';
	import pubHead from '@/components/head';
	import html2canvas from 'html2canvas';
	import wx from 'we-jssdk'; // 导入jssdk
	import {
		Toast,
		Swipe,
		SwipeItem,
		Popup,
		Dialog,
		ImagePreview
	} from 'vant';
	import {
		wxConfigApi,
		getItemDetail,
		collectedit,
		addIncart,
		getItemSku,
		CartNum
	} from '@/request/api';

	Vue.use(Toast, Swipe, SwipeItem, Popup)
	export default {
		data() {
			return {
				goodId: null,
				isNone: false, // 是否为空
				type: false, // 是否管理状态
				sindex: 1, // 轮播图下标
				showKnow: false, // 预订须知
				share: false, // 分享弹窗
				showParam: false, // 参数弹窗
				showSpec: false, // 规格弹窗
				buyNum: 1, // 购买数量
				selectSpecInfo: '', // 选中的规格信息
				spec_list: [], // 规格列表
				specId: [], // 选择的完整规格id
				goodsInfo: '', // 商品信息
				buyType: 0, // 1 加入购物车 2 立即购买
				cartNumber: 0,
				// 分享相关
				sahreInfos: '', // 分享信息
				final: false, // 是否分享到微信
				shareBox: false, // 分享弹窗
				shareSRC: null, // canvas生成的最终分海报图片
				shareLoading: false,
				shareBannerSRC: null, // 分享的海报图片
				codeSRC: null, // 分享的二维码
				curentIndex: 0,
				curentId: 0,
				comment_count: '',
				comment: '',
				is_collect: 0,
				param: [],
				father: '',
				speclist: [],
				goodsId: null,
				goods_spec_id: '',
				sku_id: '',
				spec_type: '',
				good_spec_id: '',
				sku_name: '',
				goodsImg: '',
				goodsName: '',
				goodsPrice: '',
				stock_num: 0,
				avatar: '', // 用户头像
				nickname: '', // 用户昵称
				shareImg: null, //分享的图片
				shareUrl: ''

			}
		},
		created() {
			this.goodId = this.$route.query.id
			this.getData();
			this.getCarNum();

		},
		components: {
			pubHead,
			"van-swipe": Swipe,
			"van-swipe-item": SwipeItem,
			"van-popup": Popup,
		},
		methods: {
			getImg(images, index) {
				ImagePreview({
					images: images,
					showIndex: true,
					loop: false,
					startPosition: index
				})
			},
			// 获取数据
			getData() {
				let that = this
				that.$loading()
				getItemDetail({
					goods_id: that.goodId,
					token: localStorage.getItem('token'),
					id: this.$route.query.actid ? this.$route.query.actid : ''
				}).then(res => {
					Toast.clear()
					if (res.code == 1) {
						sessionStorage.removeItem('goods_id')
						sessionStorage.removeItem('goods_type')
						sessionStorage.removeItem('actType')
						if (res.data.goods.goods_status != 10) {
							that.$tip('不好意思，此商品卖光了哦~')
							setTimeout(() => {
								that.$router.push('/')
							}, 1000)
						}
						that.goodsInfo = res.data.goods;
						that.goodsImg = that.goodsInfo.images[0]
						that.goodsName = that.goodsInfo.goods_name
						that.goodsPrice = that.goodsInfo.goods_price
						that.stock_num = that.goodsInfo.item_sku[0].stock_num
						that.is_collect = res.data.is_collect
						that.comment = res.data.comment
						that.comment_count = res.data.comment_count
						that.param = res.data.param
						that.goodsId = res.data.goods.goods_id
						that.spec_type = res.data.goods.spec_type
						that.spec_list = res.data.goods.item_sku;
						that.avatar = res.data.user.avatar;
						that.nickname = res.data.user.nickname;
						that.shareBannerSRC = res.data.goods.share_image;
						that.codeSRC = res.data.logo_image;
						that.shareImg = res.data.goods.share_image;
						that.shareUrl = res.data.url;
						if (res.data.goods.spec_type == 10) {
							that.good_spec_id = res.data.goods.item_sku[0].goods_spec_id
							console.log(that.good_spec_id)
							console.log(11111)
						} else {
							res.data.goods.item_sku.forEach((item) => {
								if (item.sub) {
									this.speclist.push(item.sub[0])
								}
							})
							that.sku_id = this.speclist[0].id
							that.sku_name = this.speclist[0].spec_value

							getItemSku({
								goods_id: this.goodsId,
								sku_id: that.sku_id
							}).then(res => {
								if (res.code == 1) {
									that.good_spec_id = res.data.goods_spec_id
									that.stock_num = res.data.stock_num
								}
							})
						}
						that.getSignPackage();
					} else {
						that.$tip(res.msg)
					}
				})
			},
			getCarNum() {
				CartNum({
					token: localStorage.getItem('token')
				}).then(res => {
					if (res.code == 1) {
						this.cartNumber = res.data.cartNum
					}
				})
			},
			// 获取轮播图当前位置
			getIndex(info) {
				this.sindex = info + 1
			},
			//转换年月日方法
			getDate(format, str) {
				let oTime = null;
				let newStr = str * 1000;
				var oDate = new Date(newStr),
					oYear = oDate.getFullYear(),
					oMonth = oDate.getMonth() + 1,
					oDay = oDate.getDate(),
					oHour = oDate.getHours(),
					oMin = oDate.getMinutes(),
					oSec = oDate.getSeconds()
				if (format == 'yyyy-mm-dd') {
					oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
				} else if (format == 'yyyy/mm/dd') {
					oTime = oYear + '/' + this.getzf(oMonth) + '/' + this.getzf(oDay)
				}
				return oTime;
			},
			//补0操作  
			getzf(num) {
				if (parseInt(num) < 10) {
					num = '0' + num;
				}
				return num;
			},
			chooseThis(id, father) {
				let that = this
				this.spec_list.forEach((item, index) => {
					if (father == index) {
						item.sub.forEach((spec) => {
							if (id == spec.id) {
								this.speclist.splice(father, 1, spec)
							}
						})
					}
				})

				// console.log(this.speclist[0].id,this.speclist[1].id)
				// let sku_id = this.speclist[0].id+'_'+this.speclist[1].id

				that.sku_name = this.speclist[father].spec_value
				if (this.spec_type == 10) {
					that.sku_id = this.speclist[father].id
				} else {
					that.sku_id = this.speclist[0].id
				}

				getItemSku({
					goods_id: this.goodsId,
					sku_id: that.sku_id
				}).then(res => {
					if (res.code == 1) {
						that.good_spec_id = res.data.goods_spec_id
						that.goodsImg = res.data.spec_image
						that.goodsPrice = res.data.goods_price
						that.stock_num = res.data.stock_num
						console.log(res)
					} else {

					}
				})
			},
			// 返回首页
			toHome() {
				this.$router.replace('/')
			},
			// 展示预订须知
			showNote() {
				this.showKnow = true;
			},
			// 关闭预订须知
			closeKnow() {
				this.showKnow = false;
			},
			// 展示分享弹窗
			showShare() {
				this.share = true;
			},
			// 展示参数弹窗
			showParams() {
				this.showParam = true;
			},
			// 查看全部评价
			toEvaluate() {
				let data = {
					id: 0,
					type: this.goodsId
				}
				this.$router.push({
					name: "Evaluates",
					query: data
				})
			},
			// 进入购物车
			toCart() {
				this.$router.replace('/car');
			},
			// 购买按钮
			buyBtn(type) {

				this.buyType = type;
				// this.getSpeces();
				this.showSpec = true;
			},
			// 关闭弹窗
			close() {
				this.showSpec = false;
				this.showParam = false;
			},
			// 减
			cutNum() {
				if (this.buyNum > 1) {
					this.buyNum--
				} else {
					this.$tip('不能再减了哦T_T');
				}
			},
			// 加
			addNum() {
				this.buyNum++
			},
			// 去购买
			toBuy() {
				if (!this.specId && this.goodsInfo.spec_type == 20) {
					this.$tip('请选择规格!');
					return
				}

				this.showSpec = false;
				// 加入购物车
				let that = this
				if (this.buyType == 1) {
					this.$loading();
					if (that.spec_type == 20) {
						getItemSku({
							goods_id: this.goodsId,
							sku_id: this.sku_id
						}).then(res => {
							if (res.code == 1) {
								console.log(111)
								console.log(res.data.goods_spec_id)
								that.good_spec_id = res.data.goods_spec_id
								addIncart({
									goods_id: this.goodsId,
									goods_spec_id: that.good_spec_id,
									num: this.buyNum,
									token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
									type: 1
								}).then(res => {
									Toast.clear();
									if (res.code == 1) {
										// this.getNums();
										this.$tip('加入购物车成功!');
										this.getCarNum()
									} else {
										this.$tip(res.msg);
									}
								})

							}
						})
					} else {
						addIncart({
							goods_id: this.goodsId,
							goods_spec_id: that.good_spec_id,
							num: this.buyNum,
							token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
							type: 1
						}).then(res => {
							Toast.clear();
							if (res.code == 1) {
								// this.getNums();
								this.$tip('加入购物车成功!');
								this.getCarNum()
							} else {
								this.$tip(res.msg);
							}
						})

					}


				} else {
					// 立即购买
					let arr = []
					let data = {
						goods_img: this.goodsImg,
						goods_id: this.goodsId,
						goods_num: this.buyNum,
						goods_price: this.goodsPrice,
						option_id: this.good_spec_id,
						goods_name: this.goodsInfo.goods_name,
						goods_type: this.sku_name
					}
					arr.push(data)
					// this.$router.push('/confirmOrder?goods='+JSON.stringify(arr))
					this.$router.push({
						name: 'Placeholder',
						query: data
					})
					// this.$router.push('/placeholder/'+encodeURIComponent(arr))
				}
			},
			// 展示分享到微信
			showFina() {
				this.share = false;
				this.final = true;
			},
			// 关闭提示
			cancel() {
				this.final = false;
			},
			// 关闭分享弹出回调
			closeShareBox() {
				// this.shareSRC = '';
			},
			showPost() {
				this.share = false;

				if (this.shareSRC != null) {
					this.shareBox = true;
				} else {
					this.shareBanner('click')
				}
			},
			shareBanner(type) {
				this.share = false;


				if (type == "click") {
					this.$loading("加载中...");
				}

				// 正常进入
				var opts = {
					backgroundColor: null,
					timeout: 50, // 加载延时
					useCORS: true
				};


				let that = this
				const timmer = setTimeout(() => {
					// if(a.complete && b.complete) {
					html2canvas(document.getElementById('canvas-share'), opts).then((canvas) => {
						that.shareSRC = canvas.toDataURL("image/png");
						that.shareBannerSRC = null;
						clearInterval(timmer);
						that.shareBox = true;
						if (type == "click") {
							Toast.clear();
						}

					});
					// }
				}, 0)
			},
			// 获取分享信息
			getShare() {
				shareInfo({
					token: localStorage.getItem('token'),
					id: this.$route.query.id,
					item_type: this.$route.query.type,
				}).then(res => {
					if (res.code == 1) {
						this.sahreInfos = res.data;
						this.codeSRC = res.data.logo_image;
						this.shareBannerSRC = res.data.item.images[0];
					}
				})
			},
			soucang() {
				console.log('1111')
				let that = this
				this.is_collect = !(this.is_collect)
				collectedit({
					token: localStorage.getItem('token'),
					item_type: "0",
					id: that.goodsInfo.goods_id
				}).then(res => {
					if (res.code == 1) {
						that.$tip(res.msg)
					} else {
						that.$tip(res.msg)
					}

				})
			},
			// 获取微信签名
			getSignPackage() {
				let that = this;
				wxConfigApi({
					url: location.href.split('#')[0]
				}).then(res => {
					if (res.code == 1) {
						// 返回的签名信息
						const signPackage = res.data.sign;
						const url = that.shareUrl;
						const title = that.goodsInfo.goods_name,
							img = that.shareImg
						wx.config({
							debug: false, // 开启调试模式
							appId: signPackage.appId, // 必填，公众号的唯一标识
							timestamp: signPackage.timestamp, // 必填，生成签名的时间戳
							nonceStr: signPackage.nonceStr, // 必填，生成签名的随机串
							signature: signPackage.signature, // 必填，签名，见附录1
							jsApiList: [
								'onMenuShareTimeline', // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
								'onMenuShareAppMessage' //分享好友
							] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						wx.ready(() => {
							// 分享给朋友
							wx.onMenuShareAppMessage({
								title: title, // 分享标题
								link: url, // 分享链接
								desc: title, // 副标题
								imgUrl: img, // 分享图标
								success() {
									// 用户成功分享后执行的回调函数
									// Toast('分享成功')
								},
								cancel() {
									// 用户取消分享后执行的回调函数
								}
							});
							// 分享到朋友圈
							wx.onMenuShareTimeline({
								title: title, // 分享标题
								link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: img, // 分享图标
								success() {},
								cancel() {}
							});
						});
						wx.error(function(res) {});
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.goodsDetail {
		min-height: 100vh;
		background-color: #f5f5f5;

		.to_ico {
			width: 0.12rem;
			height: 0.22rem;
			margin: auto 0;
		}

		// 返回首页
		.back_home {
			width: 0.62rem;
			height: 0.62rem;
			position: fixed;
			z-index: 100;
			top: 1.24rem;
			right: 0.3rem;
			border-radius: 100%;
			background-color: rgba(0, 0, 0, 0.4);

			img {
				width: 0.44rem;
				height: 0.44rem;
				margin: auto;
			}
		}

		// 轮播图
		.swipe_box {
			width: 100%;
			max-width: 750px;
			margin: 0 auto;
			height: 7.5rem;
			position: relative;

			.swiper_item {
				height: 7.5rem;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.swipe_index {
				width: 0.8rem;
				height: 0.4rem;
				position: absolute;
				z-index: 1;
				bottom: 0.3rem;
				right: 0.3rem;
				border-radius: 0.2rem;
				font-size: 0.22rem;
				line-height: 0.4rem;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		// 商品信息
		.goods_infos {
			padding: 0 0.3rem 0.3rem;
			background-color: #fff;

			.top {
				margin-top: 0.3rem;

				.title {
					font-size: .3rem;
					line-height: 150%;
					color: #333;
				}

				.share_btn {
					width: 0.4rem;
					height: 0.4rem;
					margin: 0 0 auto 0.3rem;
				}
			}

			.prices {
				margin-top: 0.3rem;

				span {
					font-size: 0.52rem;
					line-height: 120%;
					color: #FF4400;
				}

				.sales {
					font-size: 0.2rem;
					line-height: 120%;
					color: #999;
				}

				.seckill_old {
					margin-left: 0.1rem;
					font-size: 0.22rem;
					line-height: 120%;
					color: #999;

					b {
						font-weight: normal;
						text-decoration: line-through;
					}
				}
			}
		}

		// 其他服务
		.others {
			height: 0.8rem;
			padding: 0 0.3rem;
			border-bottom: 0.01rem solid #ededed;
			font-size: 0.26rem;
			line-height: 0.8rem;
			color: #333;
			background-color: #fff;

			.text {
				margin-left: 0.3rem;
				font-size: 0.24rem;
				color: #666;
			}
		}

		// 商品评价
		.evaluates {
			padding: 0 0.3rem;
			background-color: #fff;

			.evaluate_head {
				height: 0.8rem;
				border-bottom: 0.01rem solid #ededed;
				font-size: 0.36rem;
				font-weight: bold;
				line-height: 0.8rem;
				color: #212121;

				.right {
					font-size: 0.2rem;
					color: #666;

					span {
						padding-right: 0.24rem;
						background: url('~@/assets/c_rightarrow.png') no-repeat right center;
						background-size: 0.12rem 0.22rem;
					}
				}
			}

			// 评价
			.evaluate {
				padding: 0.2rem 0;

				.top {
					.user_img {
						width: 0.5rem;
						height: 0.5rem;
						margin: 0 0 auto;
						border-radius: 100%;
						overflow: hidden;
					}

					.rights {
						margin-left: 0.2rem;

						.user_name {
							font-size: 0.26rem;
							line-height: 120%;
							color: #333;
						}

						.spec {
							margin-top: 0.1rem;
							font-size: 0.2rem;
							line-height: 120%;
							color: #b2b2b2;
						}

						.star_box {
							margin-left: 0.2rem;

							img {
								width: 0.2rem;
								height: 0.2rem;
								margin: 0 0.02rem;
							}
						}
					}
				}

				.evaluate_text {
					margin-left: 0.56rem;
					font-size: 0.24rem;
					line-height: 150%;
					color: #333;
				}

				.evaluate_imgs {
					margin-left: 0.56rem;

					.img {
						width: 2rem;
						height: 2rem;
						margin: 0.16rem 0.14rem 0 0;
						border-radius: 0.1rem;
					}

					.img:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}

		// 商品详情
		.articles {
			.heads {
				font-size: 0.26rem;
				line-height: 0.8rem;
				color: #333;
				height: 0.8rem;
				position: relative;
			}

			.heads::before,
			.heads::after {
				content: "";
				width: 0.78rem;
				height: 0.02rem;
				margin: auto 0;
				position: absolute;
				z-index: 1;
				top: 0;
				bottom: 0;
				background-color: #dedede;
			}

			.heads::before {
				left: 30%;
			}

			.heads::after {
				left: 60%;
			}

			.article {
				padding: 0.2rem;
				background-color: #fff;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 底部栏
		.footer_box {
			width: 100%;
			height: 1rem;

			.foot_items {
				width: 100%;
				max-width: 750px;
				height: 1rem;
				margin: 0 auto;
				padding-right: 0.28rem;
				position: fixed;
				z-index: 100;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #fff;
				box-shadow: 0px -1px 10px 0px rgba(188, 184, 184, 0.49);

				.item {
					position: relative;

					img {
						max-width: 0.4rem;
						max-height: 0.38rem;
						margin: 0.14rem auto 0;
					}

					p {
						margin-top: 0.1rem;
						font-size: 0.22rem;
						line-height: 120%;
						color: #666;
					}

					.point {
						width: 0.3rem;
						height: 0.3rem;
						position: absolute;
						z-index: 10;
						top: 00;
						right: 0.22rem;
						border-radius: 100%;
						font-size: 0.2rem;
						line-height: 0.3rem;
						background-color: #53AB2A;
					}
				}

				.right_btn {
					width: 3.8rem;
					height: 0.7rem;
					margin: auto 0 auto 0.2rem;
					border-radius: 0.36rem;
					overflow: hidden;
					font-size: 0.28rem;
					line-height: 0.7rem;

					.add_cart {
						background-color: #F28D17;
					}

					.buy_now {
						background-color: #53AB2A;
					}
				}
			}
		}

		// 分享弹窗
		.share_popup {
			width: 100%;
			height: 2.54rem;
			border-radius: 0.16rem 0.16rem 0 0;
			overflow: hidden;

			.share_box {
				width: 100%;
				background-color: #fff;

				.share_item {
					img {
						width: 1.1rem;
						height: 1.1rem;
						margin: 0 auto;
						border-radius: 100%;
					}

					p {
						margin-top: 0.3rem;
						font-size: 0.3rem;
						line-height: 120%;
						color: #999;
					}
				}
			}
		}

		// 规格弹窗
		.c_popup {
			max-height: 10.18rem;
			border-radius: 0.14rem 0.14rem 0 0;
			background-color: #fff;

			.c_box {
				width: 100%;
				overflow-y: scroll;

				.top {
					height: 1.16rem;
					font-size: 0.36rem;
					line-height: 1.16rem;
					font-weight: bold;
					color: #333;
					position: relative;

					.cancel {
						width: 0.42rem;
						height: 0.42rem;
						margin: auto 0;
						position: absolute;
						z-index: 1;
						top: 0;
						right: 0.3rem;
						bottom: 0;
						background-color: #fff;
					}
				}

				// 规格弹窗
				.goods_info {
					padding: 0.3rem;
					border-bottom: 0.01rem solid #ededed;

					.goods_img {
						width: 1.6rem;
						height: 1.6rem;
						border-radius: 0.1rem;
					}

					.infos {
						margin-left: 0.3rem;

						.title {
							font-size: 0.26rem;
							line-height: 120%;
							color: #333;
						}

						.price {
							font-size: 0.32rem;
							line-height: 120%;
							color: #ff4400;
						}

						.stock {
							font-size: 0.24rem;
							line-height: 120%;
							color: #333;
						}
					}

					.cancel {
						width: 0.42rem;
						height: 0.42rem;
						margin-left: 0.2rem;
					}
				}

				// 参数列表
				.param_lists {
					overflow-y: auto;
					border-top: 0.01rem solid #ededed;

					.parama {
						width: 100%;
						height: 0.9rem;
						padding: 0 0.3rem;
						border-bottom: 0.01rem solid #ededed;
						font-size: 0.26rem;
						line-height: 0.9rem;
						color: #333;

						p {
							width: 1.8rem;
						}

						.notes {
							margin-left: 0.12rem;
							color: #666;
						}
					}
				}

				.close_btn {
					margin-top: 0.2rem;

					.btn {
						width: 100%;
						height: 0.98rem;
						margin: auto 0;
						font-size: 0.32rem;
						line-height: 0.98rem;
						background-color: #53AB2A;
					}
				}

				// 规格
				.speces {
					padding: 0.3rem;
					border-bottom: 0.01rem solid #ededed;

					.spec_title {
						font-size: 0.26rem;
						line-height: 120%;
						color: #333;
					}

					.sepc_lists {
						.spec {
							height: 0.4rem;
							margin: 0.3rem 0.3rem 0 0;
							padding: 0 0.2rem;
							border: 0.01rem solid #c0c0c0;
							border-radius: 0.1rem;
							font-size: 0.24rem;
							line-height: 0.38rem;
							color: #666;
						}

						.spec.on {
							border-color: #FEA382;
							color: #FEA382;
						}
					}
				}

				// 购买数量
				.buy_nums {
					padding: 0.3rem;
					font-size: 0.26rem;
					line-height: 120%;
					color: #333;
					border-bottom: 0.01rem solid #ededed;

					.nums_box {
						width: 2.04rem;
						height: 0.5rem;
						border: 0.01rem solid #dadada;
						border-radius: 0.1rem;

						.cut,
						.add {
							width: 0.6rem;
							font-size: 0.4rem;
							line-height: 0.48rem;
							color: #bebebe;
						}

						.num {
							border-left: 0.01rem solid #dadada;
							border-right: 0.01rem solid #dadada;
							font-size: 0.3rem;
							line-height: 0.48rem;
							color: #333;
						}
					}
				}

				// 确定按钮
				.buy_btn {
					height: 0.98rem;
					margin-top: 0.12rem;
					font-size: 0.3rem;
					line-height: 0.98rem;
					background-color: #53AB2A;
				}
			}
		}

		// 微信分享提示
		.finally_share_box {
			width: 100%;
			background-color: rgba(0, 0, 0, 0.2);

			.finally_share {
				width: 100%;
				max-width: 750px;
				height: 100vh;
				margin: 0 auto;

				.img_box {
					width: 5.64rem;
					height: 3.9rem;
					margin: 0 0.4rem 0 auto;
				}

				.white {
					width: 1.58rem;
					height: 0.6rem;
					margin: 0.36rem auto 0;
					border-radius: 0.1rem;
					font-size: 0.28rem;
					line-height: 0.6rem;
					background-color: #ff5000;
				}
			}
		}

		/* 分享海报 */
		.shareBox {
			width: 6.4rem;
			max-height: 11rem;
			margin: auto;
			z-index: 1000;

			img {
				width: 6.8rem;
				height: 100%;
			}

			/deep/ .van-swipe__indicator--active {
				background: #ff5800;
			}

			/deep/ .van-popup {
				position: fixed;
				background-color: rgba(0, 0, 0, 0.06);
				top: 0;
				left: 50%;
				bottom: 0;
				transform: translate3d(-50%, 0, 0);
				transition: .2s ease-out;
			}
		}

		.canvas_share {
			width: 5.6rem;
			max-height: 9.64rem;
			padding: 0.5rem 0.3rem;
			// margin: auto;
			position: fixed;
			z-index: 1;
			left: -500%;
			bottom: -500%;
			overflow: hidden;
			background-color: #56A934;

			.share_banner {
				width: 5rem;
				height: 6rem;
				padding: 0.2rem;
				border-radius: 0.1rem;
				overflow: hidden;
				background-color: #fff;

				img {
					width: 4.6rem;
					height: 4.6rem;
				}

				p {
					margin-top: auto;
					font-size: 0.2rem;
					line-height: 150%;
					color: #333;
				}
			}

			.share-logo-top {
				width: 1.2rem;
				height: 1.2rem;
				position: absolute;
				z-index: 1;
				top: 0.2rem;
				left: 0.2rem;
				background-color: #fff;
				border-radius: 100%;
				overflow: hidden;
			}

			.share_code {
				margin-top: 0.3rem;
				padding: 0.3rem 0.2rem;
				border-radius: 0.1rem;
				background-color: #fff;
				overflow: hidden;

				.share_left {
					.share_left_top {
						.share_user {
							width: 0.8rem;
							height: 0.8rem;
							border-radius: 100%;
							overflow: hidden;
						}

						.name {
							margin-left: 0.2rem;
							font-size: 0.26rem;
							line-height: 120%;
							color: #333;
						}
					}

					.share_left_bottom {
						.ico {
							width: 1rem;
							height: 0.4rem;
							font-size: 0.2rem;
							line-height: 0.4rem;
							background: url('~@/assets/arrow_bg.png') no-repeat center;
							background-size: 100% 100%;
						}

						.price {
							margin-left: 0.14rem;
							font-size: 0.38rem;
							line-height: 120%;
							color: #EB2126;
						}
					}

					.logo-area {
						.logo-img {
							width: 0.3rem;
							height: 0.3rem;

							img {
								width: 100%;
								height: 100%;
							}
						}

						.logo-name {
							font-size: .2rem;
							margin-left: .1rem;
						}
					}
				}

				.share_right {
					width: 1.8rem;

					.code {
						width: 1.6rem;
						height: 1.6rem;
						margin: 0 auto;
					}

					.note {
						height: 0.32rem;
						margin: 0.12rem auto 0;
						padding: 0 0.1rem;
						font-size: 0.2rem;
						line-height: 0.32rem;
						border-radius: 0.18rem;
						background-color: #56A934;
					}
				}
			}
		}
	}
</style>
